import "./style.scss";
import { Col, Row, Input } from "antd";
import Turing_ICON from "@/assets/photos/network/turingbot.png";
import AddressIcon from "@/assets/photos/twitter.png";
import MailIcon from "@/assets/icons/mail-icon.png";
import PhoneIcon from "@/assets/icons/phone-icon.png";
import straightLine from "@/assets/photos/straightLine.png";
import f from "@/assets/photos/f.png";
import twitter from "@/assets/photos/tw.jpg";
import inImg from "@/assets/photos/in.png";
import { useTranslation, Trans } from "react-i18next";

const { Search } = Input;

const MyFooter = () => {
  const { t } = useTranslation();
  const onSearch = (value, _e, info) => console.log(info?.source, value);

  return (
    <div className="footer-page-pc">
      <Row className="row-one" justify="center" align="center">
        <Col xs={24} sm={12} md={12} lg={12} xl={6} className={"left"}>
          <img className="logo" src={Turing_ICON} alt=""/>
          <div className="description">{t("AI+Robot")}</div>
        </Col>
        <Col
          xs={24} sm={12} md={12} lg={{
          span: 11,
          offset: 1
        }} xl={{
          span: 5,
          offset: 1
        }} className={"left"}>
          <div className="title">{t("aboutCompany")}</div>
          <div className="item">{t("privacyPolicy")}</div>
          <div className="item">{t("TermsAndConditions")}</div>
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={6} className={"left"}>
          <div className="title">{t("moreLink")}</div>
          <div className="item">{t("homeText")}</div>
          <div className="item">{t("contact")}</div>
        </Col>

        
        <div className="address">
        <Col className={"left"}>
          <div className="title">{t("aboutCompany")}</div>
          <div className="item">{t("privacyPolicy")}</div>
          <div className="item">{t("TermsAndConditions")}</div>
        </Col>
        <Col  className={"left"}>
          <div className="title">{t("moreLink")}</div>
          <div className="item">{t("homeText")}</div>
          <div className="item">{t("contact")}</div>
        </Col>
        </div>
       
       
        <Col xs={24} sm={12} md={12} lg={12} xl={6} className={"left"}>
          <div className="title">{t("contact")}</div>
          <div className="item">
            <img src={AddressIcon} alt=""/>
            turingvip@protonmail.com
          </div>
          <div className="item">
            <img src={PhoneIcon} alt=""/>
            turingvip@protonmail.com
          </div>
          <div className="item">
            <img src={MailIcon} alt=""/>
            turingvip@protonmail.com
          </div>
          <div className="action">{t("subscribeNewsText")}</div>
          <Search
            placeholder={t("yourEmail")}
            allowClear
            enterButton={t("subscribeText")}
            size="large"
            onSearch={onSearch}
          />
        </Col>
      </Row>
      <div className="copyright">
            <img className="straightLine" src={straightLine} alt=""/>
            <p>{t("copyright")}</p>
            <p>
            <img src={f} alt=""/>
            <img src={inImg} alt=""/>
            <img src={twitter} alt=""/>
            </p>
          </div>
    </div>
  );
};

export default MyFooter;
